<template>
    <el-table :data="props.list" stripe>
        <el-table-column label="商户ID" width="100" prop="id"></el-table-column>
        <el-table-column label="商户名称" prop="tenantName"></el-table-column>
        <el-table-column label="商户状态">
            <template #default="{ row }">
                <span class="status authed" v-if="row.status === 1">{{ shopOpenStatus[1] }}</span>
                <span class="status" v-if="row.status === 2">{{ shopOpenStatus[2] }}</span>
                <span class="status audit" v-if="row.status === 3">{{ shopOpenStatus[3] }}</span>
                <span class="status fail" v-if="row.status === 4"
                    >{{ shopOpenStatus[4] }}
                    <el-tooltip effect="dark" placement="top">
                        <template #content>
                            <div style="max-width: 400px">{{ row.statusRejectReason }}</div>
                        </template>
                        <img class="question" src="@/assets/imgs/warn.png" alt="" />
                    </el-tooltip>
                </span>
            </template>
        </el-table-column>
        <el-table-column label="注册时间" prop="createdAt" />
        <el-table-column label="认证状态" prop="createdAt">
            <template #default="{ row }">
                <span class="status" v-if="row.identStatus === 1">{{ shopAuthStatus[1] }}</span>
                <span class="status authed" v-if="row.identStatus === 2">{{ shopAuthStatus[2] }}</span>
                <span class="status audit" v-if="row.identStatus === 3">{{ shopAuthStatus[3] }}</span>
                <span class="status fail" v-if="row.identStatus === 4"
                    >{{ shopAuthStatus[4] }}
                    <el-tooltip effect="dark" placement="top">
                        <template #content>
                            <div style="max-width: 400px">{{ row.rejectReason }}</div>
                        </template>
                        <img class="question" src="@/assets/imgs/warn.png" alt="" />
                    </el-tooltip>
                </span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="{ row }">
                <el-button class="table-btn" size="small" @click="toDetail(row.id)"> 查看 </el-button>
                <el-tooltip
                    effect="dark"
                    placement="top"
                    content="未审核通过的商户不支持禁用"
                    :disabled="[1, 2].includes(row.status)">
                    <span class="ml_12">
                        <el-popconfirm
                            placement="top"
                            width="200"
                            cancel-button-type="text"
                            cancel-button-text="取消"
                            confirm-button-text="确定"
                            :icon="WarningFilled"
                            icon-color="#faad14"
                            :title="
                                row.status === 1
                                    ? `禁用后商家将无法进入该商户，确定要禁用该商户吗？`
                                    : '确定要启用该商户吗？'
                            "
                            @confirm="onOpen(row)">
                            <template #reference>
                                <el-button size="small" :disabled="[3, 4].includes(row.status)">
                                    {{ transformStream(row.status == 2 ? 1 : 2, 'IS_ENABLED_SHOP') }}
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </span>
                </el-tooltip>
            </template>
        </el-table-column>
        <template #empty>
            <div class="empty-table">
                <img style="width: 50%" src="@/assets/imgs/default.png" />
                <div class="empty-content">暂无商户信息</div>
            </div>
        </template>
    </el-table>
</template>

<script setup>
import constants from '@/commons/constants';
import { useRouter } from 'vue-router';
import { WarningFilled } from '@element-plus/icons-vue';

const props = defineProps({
    list: { type: Array, default: () => [] }
});
const emit = defineEmits(['open']);
const shopOpenStatus = constants.SHOP_OPEN_STATUS;
const shopAuthStatus = constants.SHOP_AUTH_STATUS;

const router = useRouter();
const toDetail = id => {
    router.push({ path: '/store/list/info', query: { id } });
};

const onOpen = row => {
    emit('open', row);
};
</script>

<style lang="scss" scoped>
.question {
    width: 16px;
    height: 16px;
    margin-left: 3px;
}
.ml_12 {
    margin-left: 12px;
}
.empty-table {
    padding: 50px 0;
    min-height: 300px;
    text-align: center;
    vertical: center;
    img {
        width: 50%;
    }
    .empty-content {
        height: 20px;
        font-size: 13px;
        color: #969696;
        line-height: 20px;
    }
}
</style>
